<template>
  <img src="../../static/bg.png" alt="" class="bg" />
  <img src="../../static/bigIcon.png" alt="" class="bigIcon" />
  <div class="title">
    <div class="leftIcon"></div>
    <div class="titleText">选择网点</div>
    <div class="rightIcon"></div>
  </div>
  <div
    class="item"
    v-for="item in addressList"
    :key="item.orgId"
    @click="checkAdress(item.orgId, item.orgShortName)"
  >
    <img src="../../static/checkAdress.png" alt="" class="itemBg" />
    <div class="mainTitle">
      <div>{{ item.orgShortName }}</div>
      <div class="titleArrow"></div>
    </div>
    <div class="mianArea">
      <div class="leftArea">
        <div class="leftItem">
          <img
            src="../../static/location_icon@3x.png"
            alt=""
            class="leftIcon"
          />
          <div class="infoArea">
            合肥市滨湖新区农金大厦信息技术服务楼2#楼一层、二层
          </div>
        </div>
        <div class="leftItem">
          <img src="../../static/phoone.png" alt="" class="leftIcon" />
          <div class="infoArea">{{ item.telNumber }}</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="rightArea">
        <img src="../../static/navigation_icon.png" alt="" class="navigation" />
        <div>207m</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import * as http from "../../utils/http";
import { onLoad } from "@dcloudio/uni-app";
import * as utils from "../../utils/utils";
import { useAppStore } from "../../store/index";
const store = useAppStore();
const addressList = reactive([]);
onLoad((options) => {
  let belongRegion = JSON.parse(options.value);
  http
    .orgChoose({
      belongRegion,
    })
    .then((res) => {
      let list = res.data;
      utils.getGps().then(async (res) => {
        let myLongitudeAndLatitude = res.latitude + "," + res.longitude;
        let resList = [];
        resList = await Promise.all(
          list.map(async (item) => {
            return {
              ...item,
              range: await utils.getRange(
                myLongitudeAndLatitude,
                item.longitudeAndLatitude
              ),
            };
          })
        );
        addressList.push(...resList);
      });
    });
});
const checkAdress = (orgId, orgShortName) => {
  wx.setStorageSync('orgId', orgId)
  store.setOrgId(orgId)
  wx.setStorageSync('orgShortName', orgShortName)
  store.setOrgShortName(orgShortName)
  wx.navigateBack()
};
</script>

<style scoped lang="scss">
.title {
  padding: 100rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .leftIcon {
    width: 22rpx;
    height: 22rpx;
    border-top: 2rpx solid #000;
    border-left: 2rpx solid #000;
    opacity: 0.9;
    transform: rotate(-45deg);
  }
  .titleText {
    height: 59rpx;
    line-height: 59rpx;
    color: #333333;
    font-size: 42rpx;
    font-weight: 600;
  }
}
.item {
  padding: 45rpx 70rpx;
  padding-left: 45rpx;
  width: 598rpx;
  height: 248rpx;
  margin: 18rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  .mainTitle {
    font-size: 28rpx;
    color: #333333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .titleArrow {
      width: 12rpx;
      height: 12rpx;
      border-top: 2rpx solid #666;
      border-right: 2rpx solid #666;
      transform: rotate(45deg);
      margin-left: 15rpx;
    }
  }
  .mianArea {
    width: 100%;
    height: 191rpx;
    display: flex;
    align-items: center;
    .leftArea {
      width: 70%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      .leftItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .leftIcon {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
        .infoArea {
          width: 340rpx;
          box-sizing: border-box;
          padding: 5rpx 30rpx;
          padding-right: 15rpx;
          margin: 20rpx 0;
          border-top-right-radius: 30rpx 50%;
          border-top-left-radius: 30rpx 50%;
          border-bottom-left-radius: 30rpx 50%;
          border-bottom-right-radius: 30rpx 50%;
          background-color: #f5f5f5;
          border: 1rpx solid #e6e6e6;
        }
      }
    }
    .line {
      width: 1rpx;
      height: 100%;
      background-color: #979797;
    }
    .rightArea {
      width: 30%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: #478be6;
      font-size: 24rpx;
      .navigation {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
    }
  }
  .itemBg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9;
  }
}
.bg {
  width: 750rpx;
  height: 873rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -9999;
}
.bigIcon {
  width: 206rpx;
  height: 160rpx;
  position: absolute;
  left: 534rpx;
  top: 141rpx;
  z-index: -999;
}
</style>
